<template>
  <div class="customer">
    <div class="headerFilterBox" style="margin-bottom: 10px">
      <el-select style="width: 130px" v-model="filterConfig.timeType" placeholder="时间类型" size="small">
        <el-option
          v-for="item in timeTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <div style="margin: 0 10px">
        <ErpTimePicker
          :timeValue="filterConfig.timeList"
          @handlerTimeChange="handlerTimeChange"
          type="daterange"
        />
      </div>
      <el-input size="small" style="width: 170px" clearable class="searchInput" v-model.trim="filterConfig.searchKey" placeholder="请输入名称">
        <template #suffix>
          <el-icon class="el-input__icon">
            <search @click="searchTable" />
          </el-icon>
        </template>
      </el-input>
      <ErpSearchButton
        @searchTable="searchTable"
      ></ErpSearchButton>
      <el-select style="width: 150px; margin: 0 10px" v-model="filterConfig.shopId" placeholder="门店搜索" size="small">
        <el-option
          v-for="item in shopList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <el-table :data="tableConfig.data"  size="small"
              height="calc(100vh - 280px)"
              class="tableClass"
              style="width: 100%;"
              border
              :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="k1" label="姓名"  />
      <el-table-column prop="k2" label="地区"  ></el-table-column>
      <el-table-column prop="k3" label="性别" />
      <el-table-column prop="k4" label="联系电话" />
      <el-table-column prop="k5" label="来源" />
      <el-table-column prop="k6" label="有效性" ></el-table-column>
      <el-table-column prop="k7" label="客资创建时间" />
      <el-table-column prop="k8" label="录入客服" />
      <el-table-column label="操作" align="center" width="200px">
        <template #default>
          <el-button link type="primary" size="small">查记录</el-button>
          <el-button link type="primary" size="small">客资</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="erp-order-footer">
      <el-pagination
        small="small"
        :page-sizes="[20, 50, 100, 200, 300]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background layout="total, sizes, prev, pager, next" :total="tableConfig.total"
        :page-size="tableConfig.pageSize"/>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import ErpTimePicker from "@/components/erp-time-picker-v3/erp-time-picker-v3"
import ErpSearchButton from "@/components/erp-search-button/erp-search-button"
import {curEndTime, curStartTime} from "@/utils/d_times"
const shopList = ref([
  {name: '山一半精致写真', id: 1},
  {name: '山一半旅拍', id: 2},

])
const timeTypeList = ref([
  {name: '首次访问时间', id: 1},
  {name: '创建时间', id: 2},
  {name: '首次开口时间', id: 3},
  {name: '最后互动时间', id: 4},
])
const filterConfig = reactive({
  timeType: 2,
  shopId:1,
  timeList: [],
  searchKey: ""
})
const tableConfig = reactive({
  data: [
    {k1:"小草莓1号", k2:"杭州", k3: "未知",  k4: "手机: 17617172617",   k5: "山一半精致写真", k6: "待确定", k7:"06-21 08:47:38", k8: "1001花花"},
    {k1:"小草莓2号", k2:"杭州", k3: "未知",  k4: "手机: 17617172617",   k5: "山一半精致写真", k6: "待确定", k7:"06-21 08:47:38", k8: "1001花花"},

  ],
  loading: false,
  pageSize: 50,
  pageNum: 1,
  total: 0,
  headerList:[]
})
onMounted(() => {
  init()
})
const init = () => {
  const startTime = curStartTime()
  const endTime = curEndTime()
  filterConfig.timeList = [startTime, endTime]
}
const handlerTimeChange = (time) => {
  filterConfig.timeList = time
}
const searchTable = (data) => {
  if(data){
    filterConfig.timeList = data
  }
}
const getTableList = () => {

}
const handleCurrentChange = (num) => {
  tableConfig.pageNum = num
  getTableList()
}
const handleSizeChange = (num) => {
  tableConfig.pageSize = num
  getTableList()
}
</script>

<style scoped lang="scss">
.btnItem{
  width: 80px;
  color: #fff;
  text-align: center;
  background: #0099e8;
}
.erp-order-footer{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>